<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#d1{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 75px;
				height: 75px;
				background-color: red;
			}
		</style>
		<script>
			var x = 0 ,y = 0;
			var minX = 0,maxX = window.innerWidth;
			var minY = 0,maxY = window.innerHeight;
			var obj;
			var l = true;//true代表向左移动
			var t = true;//true代表向下移动
			function moveDiv(){
				obj = document.getElementById("d1");
				
				if(x==minX){
					l = true;
				}
				if(x==maxX - 75){
					l = false;
				}
				if(y==minY){
					t = true;
				}
				if(y==maxY-75){
					t = false;
				}
				
				if(l){
					x++;
				}else{
					x--;
				}
				if(t){
					y++;
				}else{
					y--;
				}
				obj.style.top = y + "px";
				obj.style.left = x + "px";
				setTimeout("moveDiv()",1);
			}
		</script>
		
		
	</head>
	<body onload="moveDiv()">
		<div id="d1"></div>
	</body>
</html>
